<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="../../js/Vue.js-v2.6.10.js"></script>
	</head>
	<body>
		<div id="vue-app">
			
		</div>
		
		<script type="text/javascript">
			
			/* mixin(混入)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。
			 一个混入对象可以包含任意组件选项。
			 当组件使用混入对象时，所有混入对象的选项将被"混合"进入该组件本身的选项。*/
			
			/* eg: 示例1 */
			var example1 = function(){
				// 定义一个混入对象
				var myMixin = {
					created: function(){
						this.hello();
					},
					methods: {
						hello: function(){
							console.log("hello World!");
						}
					}
				}
				
				// 定义一个使用混入对象的组件
				var Component = Vue.extend({
					mixins: [myMixin],
				})
				
				// 创建继承对象
				var component = new Component(); // => hello World!
			}
			
			//执行 示例1 
			//example1();
			
			/* eg: 示例2 选项合并 */
			var example2 = function(){
				// 定义一个混合对象
				var mixin = {
					data: function(){
						return {
							message: "hello",
							foo: "abc"
						}
					},
					created: function(){
						console.log("混入对象的钩子函数被调用")
					},
					methods: {
						fooM: function(){
							console.log("foo");
						},
						conflicting: function(){
							console.log("from mixin");
						}
					}
				}
				
				// 创建vue对象 添加mixin(混入)对象
				var vm = new Vue({
					mixins: [mixin],
					el: "#vue-app",
					data: function(){
						return {
							message: "goodbye",
							bar: "def"
						}
					},
					created: function(){
						console.log("组件钩子函数被调用")
						console.log(this.$data) // => {message: "goodbye",foo: "abc",bar: "def"}
					},
					mounted: function(){
						console.log("组件创建后钩子函数被调用")
						console.log(this.$data) // => {message: "goodbye",foo: "abc",bar: "def"}
						this.fooM();
						this.barM();
						this.conflicting();
					},
					methods: {
						barM: function(){
							console.log("from self");
						},
						conflicting: function(){
							console.log("from self");
						}
					}
				})
			}
			
			//执行 示例2 
			// example2();
			
			/* eg: 示例3 全局混入 */
				/* 请谨慎地使用全局混入，因为它会影响每一个单独创建地Vue实例(包含第三方组件。)
				 大多数情况下，只应当应用于自定义选项，就像下边地示例一样。
				 推荐将其作为插件发布，以避免重复应用混入。*/
			var example3 = function(){
				// 为自定义地选型 "myOption" 注入一个处理器
				Vue.mixin({
					created: function(){
						var myOption = this.$options.myOption;
						if(myOption){
							console.log(myOption)
						}
					}
				})
				
				var vm = new Vue({
					myOption: "hello", // 此为自定义选项
				})
			}
			
			// 执行 示例3
			example3(); // => hello
			
			/* eg: 示例4 自定义选项合并策略 */
			var example4 = function(){
				//strategy n 策略,战略
				Vue.config.optionMergeStrategies.myOption = function(toVal,fromVal){
					// 返回合并后地值
				}
				
				// 对于多数值为对象地选项,可以使用与 methods 相同地合并策略
				var strategies = Vue.config.optionMergeStrategies;
				strategies.myOption = strategies.methods;
				
				// 下面为Vuex1.x的混入策略中的一个更高级的例子:
				const merge = Vue.config.optionMergeStrategies.computed;
				Vue.config.optionMergeStratgies.vuex = function(toVal,fromVal){
					if(!toVal) return fromVal;
					if(!fromVal) return toVal;
					return {
						getters: merge(toVal.getters,fromVal.getters),
						state: merge
					}
				}
			}
		</script>
	</body>
</html>